<template>
  <div class="custom-date-picker" :class="{ 'full-width': fullWidth }">
    <label class="input-label" v-if="label">{{ label }}</label>
    <el-date-picker
      v-model="dateValue"
      :type="type"
      :placeholder="placeholder"
      :format="format"
      :value-format="valueFormat"
      :size="size"
      @change="handleChange"
    />
    <div v-if="error" class="error-message">{{ error }}</div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  label: String,
  modelValue: [String, Date],
  type: {
    type: String,
    default: 'date'
  },
  placeholder: String,
  format: String,
  valueFormat: String,
  size: {
    type: String,
    default: 'default'
  },
  fullWidth: {
    type: Boolean,
    default: false
  },
  error: String
})

const emit = defineEmits(['update:modelValue', 'change'])

const dateValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const handleChange = (value) => {
  emit('change', value)
}
</script>

<style scoped>
@reference "tailwindcss";
.custom-date-picker {
  @apply flex flex-col space-y-2;
}

.custom-date-picker.full-width {
  @apply w-full;
}

.input-label {
  @apply text-sm font-medium text-gray-700 mb-1;
}

.error-message {
  @apply text-red-500 text-xs mt-1;
}
</style>